import React from 'react';
import { Redirect } from 'react-router-dom';
import { connect } from 'react-redux';
import { Row, Col, Breadcrumb } from 'antd';
import './index.scss';

const Header = (props) => {
  const { loginStatus, getUserName } = props;
  if (loginStatus) {
    return (
      <div className='header'>
        <Row className='header-top'>
          <Col span='24'>
            <span>欢迎，{ getUserName() }</span>
            {/* <a href='#'>退出</a> */}
          </Col>
        </Row>
        <Row className='breadcrumb'>
          <Col span='4' className='breadcrumb-title'>
            <Breadcrumb>
              <Breadcrumb.Item>首页</Breadcrumb.Item>
            </Breadcrumb>
          </Col>
        </Row>
      </div>
    );
  } else {
    return <Redirect to='/login' />
  }
}

const mapState = (state) => ({
  loginStatus: state.getIn(['login', 'loginStatus'])
});

const mapDispatch = (dispatch) => ({
  getUserName() {
    const userName = localStorage.getItem('userName') || 'MarkTang';
    return userName;
  }
});

export default connect(mapState, mapDispatch)(Header);